<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/review/js/jquery.comment.js" ></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <style>
    .container{
        width: 100%;
    }
    .commentbox{
        width: 1000px;
        margin: 20px auto;
    }
    .mytextarea {
        width: 40%;
        overflow: auto;
        word-break: break-all;
        height: 100px;
        color: #000;
        font-size: 1em;
        resize: none;
    }
    .comment-list{
        width: 900px;
        margin: 20px auto;
        clear: both;
        padding-top: 20px;
    }
    .comment-list .comment-info{
        position: relative;
        margin-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }
    .comment-list .comment-info header{
        width: 10%;
        position: absolute;
    }
    .comment-list .comment-info header img{
        width: 100%;
        border-radius: 50%;
        padding: 5px;
    }
    .comment-list .comment-info .comment-right{
        padding:5px 0px 5px 11%;
    }
    .comment-list .comment-info .comment-right h3{
        margin: 5px 0px;
    }
    .comment-list .comment-info .comment-right .comment-content-header{
        height: 25px;
    }
    .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
        padding-right: 2em;
        color: #aaa;
    }
    .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
        cursor: pointer;
    }
    .comment-list .comment-info .comment-right .reply-list {
        border-left: 3px solid #ccc;
        padding-left: 7px;
    }
    .comment-list .comment-info .comment-right .reply-list .reply{
        border-bottom: 1px dashed #ccc;
    }
    .comment-list .comment-info .comment-right .reply-list .reply div span{
        padding-left: 10px;
    }
    .comment-list .comment-info .comment-right .reply-list .reply p span{
        padding-right: 2em;
        color: #aaa;
    }
    </style>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span> 1亿+</span>
            回复 <span> 1亿+</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img  class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span>1亿+</span>篇游记
                    <span>1亿+</span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <!-- 游记的内容 -->
        <div class="content" render-html="travelContent.content"></div>
    </div>

    <hr>

    <!-- ---------------------------评论----------------------- -->
    <!--评价部分开始-->
    <div class="container">
        <div class="commentbox">
            <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
        </div>
        <div class="btn btn-info pull-right" id="comment">评论</div>

        <div class="comment-list">

        </div>
    </div>
<!-- ---------------------------评论----------------------- -->
</div>


<script>
    var praise;
    var author;
    var user = JSON.parse(sessionStorage.getItem("user"));
    $(function () {
        //文档加载完毕,拿到当前游记的id
        var id = getParams().id;
        if (id) {
            //有id发送ajax请求获取游记信息
            $.get("/travels/"+id, function (data) {
                //回显游记信息
                $(".travels").renderValues(data);
                author = data.author;
            });
        }

        //点赞功能
        //当我们登录的时候,先要看下我们也没有对这条游记进行了点赞,如果有,那么我们就要
        if (user){
            $.get("/praises",{userId: user.id, typeId: id, type: 2},function (data) {
                if (data.success){
                    praise = data.data;
                    if (praise.state==1){
                        $("#likeBtn").attr("class", "fa fa-thumbs-up");
                    }
                }
            })
        }
        $("#likeBtn").click(function () {
            if (!user){
                $(document).dialog({
                    type: "confirm",
                    style: "IOS",
                    titleShow: false,
                    content: "请登录",
                    buttons: [{
                        name: "跳转到登录界面",
                        callback: function() {
                            location.href = "/login.html";
                        }
                    }]
                });
                return;
            }
            //如果是第一次点赞,那么我们就增加一条记录
            if (!praise) {
                $.post("/praises", {userId: user.id, typeId: id, type: 2, state: 1}, function (data) {
                    praise = data.data;
                    $("#likeBtn").attr("class", "fa fa-thumbs-up")
                })
                return;
            }
            //如果是切换,那么我们换下状态
            console.log(praise);
            if (praise) {
                if (praise.state==1) {
                    praise.state=0;
                    $.post("/praises",praise, function (data) {
                        praise = data.data;
                        $("#likeBtn").attr("class", "fa fa-thumbs-o-up")
                    })
                }else {
                    praise.state=1;
                    $.post("/praises", praise, function (data) {
                        praise = data.data;
                        $("#likeBtn").attr("class", "fa fa-thumbs-up")
                    })
                }
            }
        })

        //----------------------------------------------------------------------------
        //收藏
        //收藏回显渲染
        if(user){
            var userId = user.id;
            var collectionState;
            $.ajaxSettings.async = false;
            $.get("/users/" + userId + "/travelCollection/" + id, function (data) {
                var a = data.data;
                collectionState = a;
            })
            if (collectionState == "TRUE") {
                $(".collectionIcon").replaceWith('<i style="color:red" class="fa fa-heart collectionIcon"></i>');
            }
            $.ajaxSettings.async = true;

        }


        //收藏功能
        $(document).on("click",".collectionIcon",function () {
            if (user) {
                var collectionState;
                var userId = user.id;
                console.log("开始");
                if($(this).is(".fa-heart-o")){
                    collectionState= "FALSE";
                }else {
                    collectionState ="TRUE";
                    console.log(collectionState);
                }
                console.log("完了之后"+collectionState);
                if (collectionState == "FALSE") {
                    //发送ajax请求,找到关联日报 增加
                    console.log("PUT");
                    $.ajax({
                        url: "/users/" + userId + "/travelCollection/"+id,
                        type: "PUT"
                    });
                    $(this).replaceWith('<i style="color:red" class="fa fa-heart collectionIcon"></i>');
                    collectionState = "TRUE";
                    console.log("PUT之后");
                } else if (collectionState == "TRUE") {
                    console.log("DELETE");
                    $.ajax({
                        url: "/users/" + userId + "/travelCollection/" + id,
                        type: "DELETE"
                    });
                    collectionState = "FALSE";
                    $(this).replaceWith('<i class="fa fa-heart-o collectionIcon"></i>');
                }
            } else {
                $(document).dialog({
                    type: 'confirm',
                    closeBtnShow: true,
                    autoClose: 6000,
                    titleText: '温馨提示',
                    content: '请先登录',
                    buttonTextConfirm: '跳转到登录界面',
                    buttonTextCancel: '继续浏览',
                    onClickConfirmBtn: function () {
                        window.location.href = "/login.html";
                    }, onClickCancelBtn: function () {
                        window.location.reload();
                    }
                });
            }
        })


        //-------------------------------------------------------- 评论
        //初始化数据
        var author;
        var pages;
        var currentPage = 1;
        var travels; //游记数组
        var arr = [];
        $.get("/reviews" , {"state":1,"essayId":id},function (data) {
            console.log(data.list);
            pages=data.pages;
            arr = data.list;
            travels = arr;
            $(".comment-list").addCommentList({data:arr,add:""});
        });

        //当屏幕滚到最底部时执行函数
        $(window).scroll(function () {
            //判断是否到底部
            if (isEnd()) {
                //判断是否有下一页
                if (currentPage < pages) {
                    //设置当前页+1,并且发送ajax请求获取下一页数据
                    console.log(pages);
                    currentPage++;
                    $.get("/reviews", {currentPage: currentPage, state:1, essayId:id}, function (data) {
                        arr = data.list;
                        $(".comment-list").addCommentList({data:arr,add:""});
                    });
                } else {
                    $(document).dialog({
                        type : "notice",
                        infoText: "已经到底部了",
                        autoClose: 1500,
                        position: "center"
                    });
                }
            }
        });
        $("#comment").click(function(){
            if (user) {
                var review =$("#content").val();
                if (review) {
                    var json = {"user.id": user.id, "authorId": author.id, "state": 1, "essayId": id, "review": review};
                    $.post("/reviews", json, function (data) {
                        window.location.reload();
                    });
                }else {
                    $(document).dialog({
                        type: 'confirm',
                        style: 'IOS',
                        titleText: "提示",
                        content: "评论不能为空!",
                        buttons: [
                            {
                                name: '确定',
                                callback: function () {
                                }
                            },
                        ]
                    });
                }
            }else {
                login();
            }
        });
    });
        //-------------------------------------------------------------------------------


    function replyClick(el) {
        el.parent().parent().append("<div class='replybox'><textarea cols='80' rows='50' placeholder='来说几句吧......' class='mytextarea' ></textarea><span class='send'>发送</span></div>")
            .find(".send").click(function () {
            var content = $(this).prev().val();
            if (content != "") {
                if (!user){
                    login();
                }
                var parentEl = $(this).parent().parent().parent().parent();
                var beReplyName = parentEl.find("h3").text();
                if (beReplyName === user.nickName) {
                    $(document).dialog({
                        type: 'confirm',
                        style: 'IOS',
                        titleText: "提示",
                        content: "请不要回复自己!",
                        buttons: [
                            {
                                name: '确定',
                                callback: function () {
                                    window.location.reload();
                                }
                            },
                        ]
                    });
                } else {
                    var replyId = user.id;//当前回复评论的用户
                    var beReplyId = parentEl.find("h3").data("uid");//该评论的用户
                    var reviewId = parentEl.find("h3").data("reviewid");
                    var img = user.headImgUrl;
                    var json = {"img": img, "replyId": replyId, "reviewId": reviewId, "content": content};
                    $.post("/reviews/" + beReplyId + "/replies", json, function (data) {
                        window.location.reload();
                    })
                }
            } else {
                alert("空内容");
            }
        });
    }

    function login() {
        $(document).dialog({
            type: "confirm",
            style: "IOS",
            titleShow: false,
            content: "请登录",
            buttons: [{
                name: "跳转到登录界面",
                callback: function () {
                    location.href = "/login.html";
                }
            }]
        });
        return;
    }
</script>
</body>
</html>